﻿<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>OA管理系统</title>
    <link rel="stylesheet" href="assets/css/style.css">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, width=device-width">
    <meta name="description" content="Bitter Mobile Template">
    <meta name="keywords" content="bootstrap, mobile template, cordova, phonegap, mobile, html, responsive"/>

</head>

<body>

<!-- Page loading -->
<div class="loading">
    <div class="spinner-grow"></div>
</div>
<!-- * Page loading -->

<!-- App Header -->
<div class="appHeader">
    <div class="pageTitle">
        <!-- <img src="assets/img/logo.png" alt="Bitter" class="image"> -->
        <span style="font-size: 18px;
            font-weight: 500;
            color: #1B2C42;
            margin: 0 0 12px 0;
            line-height: 1.4em;">员工考勤</span>
    </div>
</div>
<!-- * App Header -->

<!-- App Capsule -->
<div id="appCapsule">

    <div class="appContent">


        <!-- Card Overlay Carousel -->
        <div class="cardOverlayCarousel owl-carousel mt-2 mb-4">
            <!-- item -->
            <div class="item">
                <a href="#" class="card card-overlay text-white">
                    <img src="assets/img/sample/photo8.jpg" class="card-img img-fluid" alt="image">
                    <div class="card-img-overlay">

                        <div class="content">
                            <h1>站在新起点，迎接新挑战，创造新成绩。 　</h1>

                        </div>
                    </div>
                </a>
            </div>
            <!-- * item -->
            <!-- item -->
            <div class="item">
                <a href="#" class="card card-overlay text-white">
                    <img src="assets/img/sample/photo5.jpg" class="card-img img-fluid" alt="image">
                    <div class="card-img-overlay">
                        <div class="content">
                            <h1>不积跬步，无以至千里；不积小流，无以成江海。 　　</h1>
                        </div>
                    </div>
                </a>
            </div>
            <!-- * item -->
            <!-- item -->
            <div class="item">
                <a href="#" class="card card-overlay text-white">
                    <img src="assets/img/sample/photo11.jpg" class="card-img img-fluid" alt="image">
                    <div class="card-img-overlay">

                        <div class="content">
                            <h1>努力是人生最好的信仰：奋斗过才不会有遗憾。 　　</h1>
                        </div>
                    </div>
                </a>
            </div>
            <!-- * item -->
            <!-- item -->
            <div class="item">
                <a href="#" class="card card-overlay text-white">
                    <img src="assets/img/sample/photo10.jpg" class="card-img img-fluid" alt="image">
                    <div class="card-img-overlay">
                        <div class="content">
                            <h1>给自己一个目标，让生命为它燃烧。 　</h1>
                        </div>
                    </div>
                </a>
            </div>
            <!-- * item -->
        </div>
        <!-- * Card Overlay Carousel -->


        <div class="divider mt-4 mb-4"></div>

        <div class="sectionTitle mb-2">
            <div class="text-muted" id="year">2020年</div>
            <div class="title">
                <h1 id="dateDay">03/17</h1>
                <a href="myattendance.html">我的考勤</a>
            </div>
        </div>

        <!-- post list -->
        <form>
        <div class="row">
            <!-- item -->
            <div class="col-6">
                <a href="" class="postItem">
                    <div class="imageWrapper">
                        <img src="assets/img/sample/photo7.jpg" alt="image" class="image">
                        <div class="badge badge-success">早安</div>
                    </div>
                    <button type="button" class="btn btn-success" id="morning" onclick="daka(0);return false;">上班打卡
                    </button>
                </a>
            </div>
            <!-- * item -->
            <!-- item -->
            <div class="col-6">
                <a href="" class="postItem">
                    <div class="imageWrapper">
                        <img src="assets/img/sample/photo11.jpg" alt="image" class="image">
                        <div class="badge badge-warning">明天见</div>
                    </div>
                    <button type="button" class="btn btn-warning" id="afternoon" onclick="daka(1);return false;">下班打卡
                    </button>
                </a>
            </div>
            <!-- * item -->
        </div>
        </form>
        <!-- * post list -->

        <!-- App Bottom Menu -->
        <div class="appBottomMenu">
            <div class="item active">
                <a href="attendance.html">
                    <p>
                        <i class="icon ion-ios-water"></i>
                        <span>考勤</span>
                    </p>
                </a>
            </div>
            <div class="item">
                <a href="wages.html">
                    <p>
                        <i class="icon ion-ios-apps"></i>
                        <span>工资</span>
                    </p>
                </a>
            </div>
            <div class="item">
                <a href="my.html">
                    <p>
                        <i class="icon ion-ios-analytics"></i>
                        <span>我的</span>
                    </p>
                </a>
            </div>
        </div>
        <!-- * App Bottom Menu -->


        <!-- ///////////// Js Files ////////////////////  -->
        <!-- Jquery -->
        <script src="assets/js/lib/jquery-3.4.1.min.js"></script>
        <!-- Bootstrap-->
        <script src="assets/js/lib/popper.min.js"></script>
        <script src="assets/js/lib/bootstrap.min.js"></script>
        <!-- Owl Carousel -->
        <script src="assets/js/plugins/owl.carousel.min.js"></script>
        <!-- Main Js File -->
        <script src="assets/js/app.js"></script>

        <script type="text/javascript">

            function daka(num) {
                var standard = 12;
                var hours = new Date().getHours();
                if (num == 0){
                    if (standard < hours){
                        alert("请在规定时间上班打卡")
                    }else {
                        findIp();
                    }
                }else if (num == 1){
                    if (standard > hours){
                        alert("请在规定时间内下班打卡");
                    }else {
                        findIp();
                    }
                }
            };

            //JS AJAX
            function findIp() {
                var data = {key: "35GBZ-2AMKD-UVV4N-PU3WJ-XYDMS-EIB5B"};//ip缺省时会自动获取请求端的公网IP,
                var url = "https://apis.map.qq.com/ws/location/v1/ip";
                data.output = "jsonp";
                $.ajax({
                    type: "get",
                    dataType: 'jsonp',
                    data: data,
                    jsonp: "callback",
                    url: url,
                    async: false,
                    success: function (json) {
                        // array = new Array;
                        // array.push(json.result.ip);//公网IP
                        // array.push(json.result.ad_info.province + json.result.ad_info.city + json.result.ad_info.district);//省市区
                        // array.push(json.result.location.lat);//经度
                        // array.push(json.result.location.lng);//纬度
                        // return array;

                        var pubIp = json.result.ip;
                        var now = new Date().Format("yyyy-MM-dd hh:mm:ss");
                        $.ajax({
                            url: "/OASystem/empinfo/sign",
                            data: {"ip": pubIp, "now": now},
                            dataType: "json",
                            type: "post",
                            success: function (data) {
                                if (data["code"] == 404) {
                                    alert("请连接公司的网络进行打卡")
                                } else {
                                    alert("打卡成功")
                                }
                            },
                            error: function () {
                                alert("网络出错")
                            }
                        });
                    },
                    error: function (err) {
                        console.log("错误")
                        //业务处理
                    }
                });
            }

            $(function () {

                var date = new Date();
                var year = date.getFullYear();
                var month = date.getMonth() + 1;
                var day = date.getDate();

                var yearHtml = year + "年";
                var dateHtml = month + "/" + day;


                $("#year").text(yearHtml);
                $("#dateDay").text(dateHtml);

            });


            // 对Date的扩展，将 Date 转化为指定格式的String
            // 月(M)、日(d)、小时(h)、分(m)、秒(s)、季度(q) 可以用 1-2 个占位符，
            // 年(y)可以用 1-4 个占位符，毫秒(S)只能用 1 个占位符(是 1-3 位的数字)
            // 例子：
            // (new Date()).Format("yyyy-MM-dd hh:mm:ss.S") ==> 2006-07-02 08:09:04.423
            // (new Date()).Format("yyyy-M-d h:m:s.S") ==> 2006-7-2 8:9:4.18

            Date.prototype.Format = function (fmt) { // author: meizz
                var o = {
                    "M+": this.getMonth() + 1, // 月份
                    "d+": this.getDate(), // 日
                    "h+": this.getHours(), // 小时
                    "m+": this.getMinutes(), // 分
                    "s+": this.getSeconds(), // 秒
                    "q+": Math.floor((this.getMonth() + 3) / 3), // 季度
                    "S": this.getMilliseconds() // 毫秒
                };
                if (/(y+)/.test(fmt))
                    fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
                for (var k in o)
                    if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
                return fmt;
            }





        </script>


</body>

</html>